<template>
	<view class="">
		<view class="top">
					
						<!-- 只能有一个根元素 -->
					<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
					
			
		</view>
		<view class="" style="height: 80rpx;">
			
		</view>
		<view class="w_h_100" v-if="current==0" >

			<view class="head" v-if="data.length>0&&!loading">
				<view class="second" v-for="(item,index) in data" :key="index">
					<image src="../../static/coupons.png" style="width: 100%;position: absolute;z-index: 1;"
						class="img">
					</image>
					<view class="padding" style="z-index:999;position: absolute;">

						<view class="types d_f j_c_s_b a_i_c">
							<view class="d_f a_i_c">

								<view :class="item.status=='未领取'||item.status=='已领取' ? 'week' : 'weeks'">
									<text style="font-size: 56rpx;font-weight: bold;"><text
											style="opacity: 0;">0</text>5</text><text>元</text>
								</view>
								<view class="" style="margin-left: 70rpx;">
									<view class="youhui">
										{{item.type}}
									</view>
									<view class="" style="margin-top: 12rpx;">
										有效期{{item.starttime}}至{{item.endtime}}
									</view>
								</view>
							</view>
							<view class="" style="border: ;">
								<u-button type="success" size="mini" v-if="item.status=='未领取'" @click="lingqu(item)">
									{{item.status}}
								</u-button>
								<u-button type="error" size="mini" v-if="item.status=='待使用'">{{item.status}}</u-button>
								<u-button type="warning" size="mini" v-if="item.status=='已使用'">{{item.status}}
								</u-button>

								<u-button v-if="item.status=='已失效'" size="mini">{{item.status}}</u-button>
								<image src="../../static/未到时间@3x.png" mode="widthFix" style="width: 109rpx;"
									v-if="item.status=='未到时间'"></image>
								<!-- <image src="../../static/yishiyong.png" mode="widthFix" class="images"></image> -->
							</view>
						</view>


					</view>
				</view>

			</view>
			<view class="bottom">

			</view>
			<empty-state :loading="loading" text=' ' class="w_h_100" :img='img' :total='data.length'></empty-state>

		</view>
		<view class="w_h_100" v-else>
			<view class="head" v-if="datas.length>0&&!loadings">
				<view class="second" v-for="(item,index) in datas" :key="index">
					<image src="../../static/coupons.png" style="width: 100%;position: absolute;z-index: 1;"
						class="img">
					</image>
					<view class="padding" style="z-index:999;position: absolute;">

						<view class="types d_f j_c_s_b a_i_c">
							<view class="d_f a_i_c">

								<view :class="item.status==0||item.status==2? 'week' : 'weeks'">
									<text
										style="font-size: 56rpx;font-weight: bold;">{{item.money}}</text><text>元</text>
								</view>
								<view class="" style="margin-left: 70rpx;">
									<view class="youhui">
										无门槛优惠券
									</view>
									<view class="" style="margin-top: 12rpx;">
										有效期{{item.starttime}}至{{item.endtime}}
									</view>
								</view>
							</view>
							<view class="" style="border: ;">

								<image src="../../static/待领取@3x.png" mode="widthFix" style="width: 109rpx;"
									v-if="item.status==0" @tap="lingqus(item.id)"></image>
								<image src="../../static/已使用@3x.png" mode="widthFix" style="width: 109rpx;"
									v-if="item.status==1"></image>
								<image src="../../static/待使用@3x.png" mode="widthFix" style="width: 109rpx;"
									v-if="item.status==2"></image>
								<image src="../../static/已过期@3x.png" mode="widthFix" style="width: 109rpx;"
									v-if="item.status==3"></image>
								<image src="../../static/发放失败@3x.png" mode="widthFix" style="width: 109rpx;"
									v-if="item.status==4"></image>
								<image src="../../static/yitui.png" mode="widthFix" style="width:109rpx;"
									v-if="item.status==5"></image>
								<image src="../../static/未到时间@3x.png" mode="widthFix" style="width: 109rpx;"
									v-if="item.status=='6'"></image>
							</view>
						</view>


					</view>
				</view>

			</view>
			<view class="bottom">

			</view>
			<empty-state :loading="loadings" text=' ' class="w_h_100" :img='imgs' :total='datas.length'></empty-state>
		</view>
	</view>

</template>

<script>
	import {
		myYhqTcq,
		myYhq,
		getCouponTcqLjj,
		lqlj
	} from '../../api/index.js'
	import moment from '../../utils/moment.js'
	export default {
		data() {
			return {
				list: [{
					name: '停车券'
				}, {
					name: '充电券'
				}, ],
				current: 0,
				openid: "",
				data: [],
				loading: true,
				loadings: true,
				img: '../../static/wuyouhui.png',
				imgs: '../../static/wuyouhui.png',
				type: "2",
				payid: "",
				datas: []
			}
		},
		components: {

		},
		onLoad(opotion) {
			if (opotion.curement) {
				this.current = 1
			}
		},
		onShow() {
			this.openid = uni.getStorageSync('openid')
			this.getData()
			this.get()

		},
		methods: {
			//领取充电
			lingqus(e) {
				lqlj({
					openid: this.openid,
					yhqid: e
				}).then((res) => {
					console.log(res)
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 2000
					});
					this.get()

				})
			},
			//领取停车
			lingqu(e) {
				console.log(e.id)
				getCouponTcqLjj({
					id: e.id,
					receiveAccount: uni.getStorageSync('openidH5'),
					openid: this.openid
				}).then((res) => {
					console.log(res)
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 2000
					});
					this.getData()
				})
			},
			change(index) {
				this.current = index;

			},
			get() {

				myYhq({
					openid: this.openid,
					quan_type: this.type,
					payid: this.payid
				}).then((res) => {
					console.log(res, '111')

					for (var i in res.data) {
						if (res.data[i].status == 0) {
							if (Date.now() < res.data[i].starttime * 1000) {
								res.data[i].status = 6
							}

						}
						res.data[i].starttime = moment(res.data[i].starttime * 1000).format("YYYY.MM.DD")
						res.data[i].endtime = moment(res.data[i].endtime * 1000).format("YYYY.MM.DD")


					}
					this.datas = res.data

					this.loadings = false
				}).catch(err => {
					this.loadings = false
				})
			},
			getData() {
				this.loading = true
				myYhqTcq({
					openid: this.openid
				}).then((res) => {
					console.log(res)

					for (var i in res.data) {

						if (res.data[i].status == 0) {
							if (Date.now() < res.data[i].starttime * 1000) {

								res.data[i].status = '未到时间'
							} else {
								res.data[i].status = '未领取'
							}

						} else if (res.data[i].status == 1) {
							res.data[i].status = '已领取'
						} else if (res.data[i].status == 2) {
							res.data[i].status = '已使用'
						} else if (res.data[i].status == 3) {
							res.data[i].status = '已失效'
						}
						if (res.data[i].type == 1) {

							res.data[i].type = 'p云优惠券'
						} else if (res.data[i].type == 2) {
							res.data[i].type = '捷停车优惠券'
						} else if (res.data[i].type == 3) {
							res.data[i].type = '速停车优惠券'
						} else if (res.data[i].type == 4) {
							res.data[i].type = '通用立减金'
						}
						res.data[i].starttime = moment(res.data[i].starttime * 1000).format("YYYY.MM.DD")
						res.data[i].endtime = moment(res.data[i].endtime * 1000).format("YYYY.MM.DD")

					}
					this.data = res.data

					this.loading = false
				}).catch(err => {
					this.loading = false
				})
			}

		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	
	.top{
		background-color: white;
		z-index: 9999999;
		position: fixed;
		top: 0;
		width: 100%;
	}
	.youhui {
		color: #333333;
	}

	.week {
		color: #ED3B44;
	}

	.weeks {
		color: #999999;
	}

	.images {
		width: 109rpx;
		height: 36rpx;

	}

	.second {
		position: relative;
		height: 120rpx;
		margin-top: 25rpx;
	}

	.box {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}

	.type {
		font-size: 26rpx;
		font-weight: bold;
		color: #1A1A1A;
	}

	.head {
		padding: 20rpx;
	}

	.padding {
		padding: 0rpx 18rpx 0rpx 48rpx;
		width: 100%;
	}

	.img {
		background-size: 100% 100%;
		height: 100%;
	}

	.types {
		margin-top: 24rpx;
		font-size: 24rpx;
		color: #666666;
	}

	.money {

		font-size: 24rpx;

		font-weight: bold;
		color: #999999;
	}

	.bottom {
		height: 32rpx;
	}
</style>
